<template>
  <div class="app-container">
    <div class="searchform">
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="userName" label="操作员">
              <el-input v-model="search.userName" placeholder="操作员"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="9" :md="6">
            <el-form-item prop="startDate" label="开始日期">
              <el-date-picker
                v-model="search.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="9" :md="6">
            <el-form-item prop="endDate" label="结束日期">
              <el-date-picker
                v-model="search.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">操作日志查询</div>
      </div>
      <BaseTable v-loading="loading" ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column label="序号" type="index"/>
        <el-table-column prop="USER_NAME" label="操作员"/>
        <el-table-column prop="MODE_NAME" label="模块名称"/>
        <el-table-column prop="URL" label="URL" min-width="180"/>
        <el-table-column prop="RESULT" label="操作结果"/>
        <el-table-column prop="RESPONSE_TIME" label="响应时间(s)"/>
        <el-table-column prop="START_DATE" label="开始日期"/>
        <el-table-column prop="END_DATE" label="结束日期"/>
      </BaseTable>
    </div>
  </div>
</template>
<script>
import {
  getOperateLogList
} from '@/api/admin/system_settings/gms/operateLog'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'OperateLog',
  components: {
    BaseTable
  },
  mixins: [formMixins],
  data() {
    return {
      header: { 'Content-Type': 'multipart/form-data' },
      uploadUrl: '/dmscloud.basedata/commonDatas/file/upload',
      // 查询条件
      search: {
        pageNum: 1,
        limit: 10,
        userName: '',
        startDate: '',
        endDate: ''
      },
      loading: false,
      table: {},
      form: {}
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      this.loading = true
      const table = this.$refs['table']
      getOperateLogList(this.search)
        .then(res => {
          table.complete().filData(res)
          this.loading = false
        })
        .catch(err => {
          table.complete()
          this.loading = false
        })
    }
  }

}

</script>

<style lang="scss" scoped>
::v-deep {
  .el-upload{
    width: 100% !important;
  }
  .el-upload-dragger {
    width: 100% !important;
  }
}
</style>
